<template>
  <div>
    <el-breadcrumb class="breadcrumb-row" separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>借阅管理</el-breadcrumb-item>
      <el-breadcrumb-item>图书借阅记录</el-breadcrumb-item>
    </el-breadcrumb>

    <el-card>
      <el-table :data="borrowList" stripe style="width: 100%">
        <el-table-column prop="borrowId" label="借阅ID"></el-table-column>
        <el-table-column prop="bookId" label="图书ID"></el-table-column>
        <el-table-column prop="bookName" label="图书名称"></el-table-column>
        <el-table-column prop="publish" label="图书出版社"></el-table-column>
        <el-table-column prop="author" label="图书作者"></el-table-column>
        <el-table-column prop="userName" label="借阅人"></el-table-column>
        <el-table-column prop="userId" label="借阅者ID"></el-table-column>
        <el-table-column prop="borrowDate" label="借出时间" sortable width="200px"></el-table-column>
        <el-table-column prop="returnDate" label="归还时间" sortable width="200px"></el-table-column>
        <el-table-column label="归还信息" :filters="[{ text: '已归还', value: 1 }, { text: '未归还', value: 0 }]"
          :filter-method="filterMethod" filter-placement="bottom-end">
          <template slot-scope="scope">
            <el-tag :type="scope.row.status ? 'primary' : 'success'" disable-transitions>{{ scope.row.status === 0 ? '已归还'
              :
              '未归还' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-tooltip content="编辑" placement="top-start">
              <el-button type="primary" icon="el-icon-edit" size="mini" circle
                @click="editRecord(scope.row)"></el-button>
            </el-tooltip>
            <el-tooltip v-permission="'user:dele'" content="删除" placement="top-start">
              <el-button type="danger" icon="el-icon-delete" size="mini" circle
                @click="deleteRecord(scope.row)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="borrowParams.currentPage" :page-sizes="[5, 10, 15, 20]" :page-size="borrowParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>

      <el-dialog title="修改信息" :visible.sync="dialogUpVisible" width="500px">
        <el-form :model="upForm" status-icon size="medium">
          <el-form-item prop="userId" label="用户ID">
            <el-input prefix-icon="el-icon-user-solid" type="text" v-model="upForm.userId" autocomplete="off"
              placeholder="请输入用户ID"></el-input>
          </el-form-item>
          <el-form-item prop="bookId" label="图书ID">
            <el-input prefix-icon="el-icon-user-solid" type="text" v-model="upForm.bookId" autocomplete="off"
              placeholder="请输入书本ID"></el-input>
          </el-form-item>
          <el-form-item>
            <el-radio v-model="upForm.status" :label="1">未归还</el-radio>
            <el-radio v-model="upForm.status" :label="0">已归还</el-radio>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogUpVisible = false">取 消</el-button>
          <el-button type="primary" @click="updateBorrow">确 定</el-button>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { updateBorrow, getBorrowAll, deleteBorrow } from '@/request'
import dayjs from 'dayjs'
export default {
  data () {
    return {
      dialogUpVisible: false,
      upForm: {},
      total: 0,
      borrowParams: {
        name: '', // 名称
        currentPage: 1, // 当前页数
        pageSize: 5
      },
      borrowList: []
    }
  },
  created () {
    this.getBorrowList()
  },
  methods: {
    editRecord (row) {
      this.upForm = {
        borrowId: row.borrowId,
        userId: row.userId,
        bookId: row.bookId,
        status: row.status
      }
      this.dialogUpVisible = true
    },
    deleteRecord (row) {
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const data = await deleteBorrow([row.borrowId])
        if (data.code != 200) return this.$message.error(data.msg)
        this.$message.success(data.msg)
        this.getBorrowList()
      })
    },
    async updateBorrow () {
      // console.log("update");
      const data = await updateBorrow(this.upForm)
      if (data.code != 200) return this.$message.error(data.msg)
      this.$message.success(data.msg)
      this.dialogUpVisible = false
      this.getBorrowList()
    },
    handleSizeChange (num) {
      this.borrowParams.pageSize = num
      this.getBorrowList()
    },
    handleCurrentChange (curnum) {
      this.borrowParams.currentPage = curnum
      this.getBorrowList()
    },
    async getBorrowList () {
      const data = await getBorrowAll(this.borrowParams)
      if (data.code != 200) return this.$message.error(data.msg)
      // console.log(data.data.records)
      this.borrowList = data.data.records.map(item => {
        return {
          borrowId: item.borrow.borrowId,
          userId: item.borrow.userId,
          userName: item.user ? item.user.username : '暂无',
          bookId: item.borrow.bookId,
          bookName: item.book ? item.book.bookName : '暂无',
          author: item.book ? item.book.author : '暂无',
          publish: item.book ? item.book.publish : '暂无',
          borrowDate: dayjs(item.borrow.borrowDate).format('YYYY-MM-DD'),
          returnDate: dayjs(item.borrow.returnDate).format('YYYY-MM-DD'),
          backDate: item.borrow.backDate,
          status: item.borrow.status
        }
      })
      this.total = data.data.total
    },
    filterMethod (value, row) {
      if (value == 1) {
        return row.back_date
      } else {
        return !row.back_date
      }
    }
  }
}
</script>

<style></style>
